TNotes.javascript

Appearance

0081. postMessage

0081. postMessage ​

1. 🎯 本节内容 ​

  • postMessage

2. 🫧 评论 ​

  • 面试题可能会遇到：你都知道哪些实现跨标签通信的方式？
    • 要知道，使用 postMessage 是实现跨标签页通信的一种方案。
  • demos.1 通过 postMessage 来模拟了两个页面之间的通信效果。

3. 📒 postMessage ​

  • postMessage API 可用于实现不同窗口、标签页或 iframe 之间的安全通信。
  • postMessage 允许你向另一个浏览上下文（如新打开的窗口、iframe 等）发送消息，并可以接收来自这些上下文的消息。

4. 💻 demos.1 - 使用 postMessage 实现跨标签页通信 ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Send Message</title>
  </head>
  <body>
    <h1>Send a Message to Another Tab</h1>
    <p>
      <button onclick="openWin()">Open Win</button>
    </p>
    <input type="text" id="message" placeholder="Type your message here..." />
    <button onclick="sendMessage()">Send Message</button>

    <script src="./send.js"></script>
  </body>
</html>
js
let targetWindow
function openWin() {
  // 使用 window.open 打开的窗口对象。
  // 将窗口对象存储在 targetWindow 变量中，方便后续获取目标窗口，并给它传递消息。
  targetWindow = window.open('receive.html', '_blank')
}
function sendMessage() {
  const message = document.getElementById('message').value

  // 发送消息到目标窗口
  targetWindow.postMessage(
    {
      senderID: '__Tdahuyou__',
      message,
    },
    'http://127.0.0.1:5500/'
  )

  // * 表示所有域都 ok
  // targetWindow.postMessage(message, '*')
}
// 测试步骤：
// 通过 open with live server 插件来打开 send.html
// 假设打开的页面对应的域是 http://127.0.0.1:5500/
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Receive Message</title>
  </head>
  <body>
    <h1>Received Messages:</h1>
    <ul id="messages"></ul>

    <script src="./receive.js"></script>
  </body>
</html>
js
// 添加事件监听器以接收消息
window.addEventListener('message', function (event) {
  // 检查消息来源是否可信
  // 如果消息不是来自预期的源，则忽略
  // 相当于做了一个身份验证
  if (
    event.origin !== 'http://127.0.0.1:5500' ||
    event.data.senderID !== '__Tdahuyou__'
  ) {
    return
  }

  console.log('Received message:', event)
  // 处理接收到的消息
  const messageList = document.getElementById('messages')
  const newMessage = document.createElement('li')
  newMessage.textContent = event.data.message
  messageList.appendChild(newMessage)
})
  • 这是一个简单的示例，演示了如何使用 postMessage 在两个不同的标签页之间进行通信。这个例子分为两部分：一个页面 send.html 用来发送消息，另一个页面 receive.html 用来接收消息。
  • 测试流程
    • 1️⃣ 打开 send.html 页面（注意，以 Live server 的形式启动）
    • 2️⃣ 点击按钮 Open Win，此时会打开 receive.html 页面，此时 send.html 还没通过 postMessage 给 receive.html 发送消息
    • 3️⃣ 在输入框中输入任意内容，然后点击 Send Message 按钮
    • 4️⃣ 切换到 receive.html 页面，查看收到的消息
1
2
3
4
  • 一些注意事项
    • 安全性问题，始终检查 event.origin，确保消息来自你信任的源。这可以防止恶意网站发送伪造消息。也可以通过其它自定义方案，加上身份验证的逻辑。
    • 跨域限制问题，postMessage 支持跨域通信，但需要正确设置 targetOrigin 参数，确保只将消息发送给正确的接收者。
    • 性能问题，频繁的跨窗口通信可能会对性能产生影响，特别是当涉及大量数据传输时。

5. 🔗 引用 ​

Discussions